@if (question && question.behaviourCertaintyOptions && question.behaviourCertaintyOptions.length) {
    <div>
        <ion-item class="ion-text-wrap addon-qbehaviour-deferredcbm-certainty-title">
            <ion-label class="ion-no-margin">
                <ion-row class="ion-align-items-center">
                    <ion-col size="auto" class="ion-no-padding">
                        <p class="item-heading">
                            {{ 'core.question.certainty' | translate }}
                        </p>
                    </ion-col>
                    <ion-col class="ion-no-padding">
                        <ion-button class="addon-qbehaviour-deferredcbm-certainty-help-button" fill="clear"
                            (click)="showCertaintyHelp()" [ariaLabel]="'core.help' | translate">
                            <ion-icon slot="icon-only" name="far-circle-question" aria-hidden="true" />
                        </ion-button>
                    </ion-col>
                </ion-row>
            </ion-label>
        </ion-item>

        <ion-radio-group [(ngModel)]="question.behaviourCertaintySelected" [name]="question.behaviourCertaintyOptions[0].name">
            @for (option of question.behaviourCertaintyOptions; track option.id) {
                <ion-item class="ion-text-wrap">
                    <ion-radio id="{{option.id}}" [value]="option.value" [disabled]="option.disabled">
                        {{ option.text }}
                    </ion-radio>
                </ion-item>
            }
        </ion-radio-group>

        <!-- ion-radio doesn't use an input. Create a hidden input to hold the selected value. -->
        <input type="hidden" [ngModel]="question.behaviourCertaintySelected" [attr.name]="question.behaviourCertaintyOptions[0].name">
    </div>
}
